<script setup lang='ts'>
import { onMounted, ref } from "vue"
import { useRouter } from 'vue-router'
import { getCherryPickInfo, getBookChapterList } from "@/api/index"

import { useCounterStore } from '../stores/counter'

import BookViewFirst from "@/components/BookViewFirst.vue"
import BookViewSecond from "@/components/BookViewSecond.vue"
import LoadingPage from "@/components/LoadingPage.vue"
import LoadingView from "@/components/LoadingView.vue"
import HumanHotPage from "@/components/HumanHotPage.vue"
const $router = useRouter()
const store = useCounterStore()
const banners = ref<any>([])
const shortCut = ref<any>([])
const thisWeek = ref<any>([])
const popularity = ref<any>([])
const fineBook = ref<any>([])
const plot = ref<any>([])
const highQuality = ref<any>([])
const finishBook = ref<any>([])
const goodBook = ref<any>([])
const allWatch = ref<any>([])

const isLoading = ref<boolean>(true)
const isLoadingView = ref<boolean>(false)


const toShortCutNav = (cut: any) => {
    if (cut.title == '排行' || cut.title == '人气' || cut.title == '完结') {
        $router.push({ path: '/shortCut', query: { url: cut.url, type: cut.title } })
    } else {
        window.location.href = cut.url;
    }
}
const toShortCutNavElse = (str: string) => {
    if (str == '排行') {
        $router.push({ path: '/shortCut', query: { url: fineBook.value.more.url, type: '排行' } })
    } else if (str == '完结') {
        $router.push({ path: '/shortCut', query: { url: finishBook.value.more.url, type: '完结' } })
    }
}
onMounted(async () => {

    let res = await getCherryPickInfo($router.currentRoute.value.query.uuid);
    banners.value = res.data.data.list[0].banners;
    shortCut.value = res.data.data.list[1].shortCut;
    thisWeek.value = res.data.data.list[2]
    popularity.value = res.data.data.list[3]
    fineBook.value = res.data.data.list[4]
    plot.value = res.data.data.list[5]
    highQuality.value = res.data.data.list[6]
    finishBook.value = res.data.data.list[7]
    goodBook.value = res.data.data.list[8]
    allWatch.value = res.data.data.list[9]

    isLoading.value = false;
})

const toBookContent = async (book: any) => {
    isLoadingView.value = true
    let bookChapterRes = await getBookChapterList(book.id)

    store.getChapter(bookChapterRes.data.data.catalog)
    isLoadingView.value = false
    $router.push({
        path: '/content', query: {
            source_uuid: bookChapterRes.data.data.book.sourceUuid, content_uuid: bookChapterRes.data.data.catalog[0].uuid, title: book.title, index: 0
        }
    })
}
</script>

<template>

    <div :style="{ height: '100%', width: '100%' }">
        <LoadingView v-if="isLoadingView" />
        <LoadingPage v-if="isLoading" />

        <div class="cherry-pick" v-else>
            <div class="banner">
                <van-swipe :autoplay="4000" lazy-render :indicator-color="'#fff'">
                    <van-swipe-item v-for="b in banners" :key="b.id">
                        <img :src="b.cover" @click="toBookContent(b)" />
                    </van-swipe-item>
                </van-swipe>
            </div>
            <div class="short-cut">
                <ul class="list">
                    <li v-for="cut in shortCut" :key="cut" @click="toShortCutNav(cut)">
                        <img v-lazy="cut.cover" alt="">
                        <span>{{ cut.name }}</span>
                    </li>
                </ul>
            </div>
            <div class="this-week">
                <h3>{{ thisWeek.name }}</h3>
                <div class="this-week-first">
                    <BookViewFirst :bookinfo="thisWeek?.list?.slice(0, 1)" @click="toBookContent(thisWeek?.list[0])" />
                </div>
                <div class="this-week-else">
                    <BookViewSecond v-for="book in thisWeek?.list?.slice(1, 5)" :key="book.id" :book="book"
                        @click="toBookContent(book)" />
                </div>
            </div>
            <div class="popularity">
                <h3>{{ popularity.name }}</h3>
                <BookViewFirst v-for="book in popularity.list" :key="book.id" :bookinfo="book"
                    @click="toBookContent(book)" />
            </div>

            <div class="fine-book">
                <h3>{{ fineBook.name }}</h3>
                <div class="find-book-list">
                    <HumanHotPage v-for="book, index in fineBook.list" :key="book.id" :bookinfo="book" :index="index"
                        @click="toBookContent(book)" />
                </div>
                <p @click="toShortCutNavElse('排行')">查看榜单 ></p>
            </div>
            <div class="plot">
                <h3>{{ plot.name }}</h3>
                <BookViewFirst v-for="book in plot.list" :key="book.id" :bookinfo="book" @click="toBookContent(book)" />
            </div>
            <div class="high-quality">
                <h3>{{ highQuality.name }}</h3>
                <BookViewFirst v-for="book in highQuality.list" :key="book.id" :bookinfo="book"
                    @click="toBookContent(book)" />
            </div>
            <div class="finish-book">
                <h3>{{ finishBook.name }}</h3>
                <div class="finish-book-list">
                    <HumanHotPage v-for="book, index in finishBook.list" :key="book.id" :bookinfo="book" :index="index"
                        @click="toBookContent(book)" />
                </div>
                <p @click="toShortCutNavElse('完结')">查看榜单 ></p>
            </div>
            <div class="good-book" v-if="goodBook">
                <h3>{{ goodBook.name }}</h3>
                <BookViewFirst v-for="book in goodBook.list" :key="book.id" :bookinfo="book"
                    @click="toBookContent(book)" />
            </div>
            <div class="all-watch" v-if="allWatch">
                <h3>{{ allWatch.name }}</h3>
                <BookViewFirst v-for="book in allWatch.list" :key="book.id" :bookinfo="book"
                    @click="toBookContent(book)" />
            </div>
            <div class="buttom">
                我是有底线的
            </div>
        </div>
    </div>

</template>

<style lang="less" scoped>
h3 {
    color: #000;
    font-weight: bold;
    font-size: 17rem;
}

.cherry-pick {
    width: 100%;
    height: 100%;

    .banner {
        // background-color: aqua;
        overflow: hidden;
        width: 100%;

        img {
            width: 100%;
        }
    }

    .short-cut {
        padding: 5rem 0;
        border-bottom: 1px solid #eee;

        ul.list {
            display: flex;
            align-items: center;
            justify-content: space-around;

            li {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;

                img {
                    width: 50rem;
                }

                span {
                    color: #2d2d2d;
                    font-size: 13rem;
                }
            }
        }
    }

    .this-week {
        padding: 10rem 0;
        margin-top: 10rem;
        border-bottom: 1px solid #eee;

        .this-week-first {
            margin: 15rem 0 20rem;
        }

        .this-week-else {
            width: 100%;
            display: flex;
            justify-content: space-between;
        }
    }

    .popularity,

    .plot,
    .high-quality,
    .good-book,
    .all-watch {
        width: 100%;
        padding: 10rem 0 0;
        margin-top: 10rem;
        border-bottom: 1px solid #eee;

        h3 {
            margin-bottom: 15rem;
        }
    }

    .finish-book,
    .fine-book {
        margin-top: 25rem;
        border-bottom: 1px solid #eee;
        width: 100%;
        padding-bottom: 10rem;

        h3 {
            margin-bottom: 15rem;
        }

        .finish-book-list,
        .find-book-list {
            width: 100%;
            display: flex;
            justify-content: space-between;
        }

        >p {
            text-align: center;
            font-size: 14rem;
            color: #888;
        }
    }

    .buttom {
        padding: 15rem 0;
        text-align: center;
        font-size: 12rem;
        color: #888;
    }
}
</style>
